<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1080">
    <el-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            label-width="100px"
            v-loading="formLoading"
            :disabled="disabled"
    >
      <el-row :gutter="20">
        <!-- <el-col :span="8">
          <el-form-item label="出库编号" >
            <el-input  v-model="queryParams.itemId"  />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="入库类型" >
            <el-select
              v-model="queryParams.itemType"
              clearable
              filterable
              placeholder="请入库类型"
              class="!w-1/1"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="入库时间" >
            <el-date-picker
                    v-model="formData.outTime"
                    type="date"
                    @change="changeTime"
                    placeholder="选择入库时间"


                    class="!w-1/1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户" prop="customerId">
            <el-select
                    v-model="queryParams.customerId"
                    clearable
                    filterable
                    placeholder="请选择客户"
                    class="!w-1/1"
            >
              <el-option
                      v-for="item in dataList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注" prop="remark">
            <el-input
                    type="textarea"
                    v-model="queryParams.remark"
                    :rows="1"
                    placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件" prop="fileUrl">
            <UploadFile :is-show-tip="false" v-model="queryParams.fileUrl" :limit="1" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 子表的表单 -->
    <ContentWrap>
      <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
        <el-tab-pane label="入库产品清单" name="item">
          <StockOutItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
        </el-tab-pane>
      </el-tabs>
    </ContentWrap>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
        确 定
      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
  import { StockOutApi, StockOutVO } from '@/api/erp/stock/out'
  import StockOutItemForm from './components/StockOutItemForm.vue'
  import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
  import {customerApi} from '@/api/erp/foundation/customer'
  /** ERP 其它出库单表单 */
  defineOptions({ name: 'StockOutForm' })

  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const queryParams = reactive({

    remark:"",//备注
    fileUrl:"",//附件 URL
    itemType:1, //入库物品类型 0物料 1物品
    customerId:"", //客户编号
    outTime:"", //出库时间
    items:[]
  })
  const options=ref([
    {
      label:'物流',
      value:0
    },
    {
      label:'物品',
      value:1
    }
  ])
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
  const formData = ref({
    id: undefined,
    customerId: undefined,
    outTime: undefined,
    remark: undefined,
    fileUrl: '',
    items: []
  })
  const formRules = reactive({
    outTime: [{ required: true, message: '出库时间不能为空', trigger: 'blur' }]
  })
  const disabled = computed(() => formType.value === 'detail')
  const formRef = ref() // 表单 Ref
  const customerList = ref<CustomerVO[]>([]) // 客户列表
  const dataList=ref([])
  //出库时间
  function changeTime(e){
    const date = new Date(e);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份+1补零
    const day = date.getDate().toString().padStart(2, '0'); // 日期补零
    const formattedDate = `${year}-${month}-${day}`;
    queryParams.outTime=formattedDate
  }
  /** 子表的表单 */
  const subTabsName = ref('item')
  const itemFormRef = ref()
  onMounted(async () => {
    getpageList()
  })
  //列表接口
  function getpageList(){
    let parm={

      pageNo:1,
      pageSize:99,

    }
    customerApi.pageList(parm).then((res)=>{

      dataList.value=res.list
      console.log('列表的数据',dataList.vlaue)
    })
  }
  /** 打开弹窗 */
  const open = async (type: string, id?: number) => {
    dialogVisible.value = true
    dialogTitle.value = t('action.' + type)
    formType.value = type
    resetForm()
    // 修改时，设置数据
    if (id) {
      formLoading.value = true
      try {
        formData.value = await StockOutApi.getStockOut(id)
      } finally {
        formLoading.value = false
      }
    }

  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗

  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
  const submitForm = async () => {
    console.log('看一下这个是什么',formData.value.items)
    let parm={
      ...queryParams,
      items:formData.value.items
    }
    console.log('这个是啥',parm)
    StockOutApi.createStockOut(parm).then((res)=>{

    })
    return
    // 校验表单
    await formRef.value.validate()
    await itemFormRef.value.validate()

    // 提交请求
    formLoading.value = true


    try {
      const data = formData.value as unknown as StockOutVO
      if (formType.value === 'create') {
        await StockOutApi.createStockOut(parm)
        message.success(t('common.createSuccess'))
      } else {
        await StockOutApi.updateStockOut(parm)
        message.success(t('common.updateSuccess'))
      }
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
    } finally {
      formLoading.value = false
    }
  }

  /** 重置表单 */
  const resetForm = () => {
    formData.value = {
      id: undefined,
      customerId: undefined,
      outTime: undefined,
      remark: undefined,
      fileUrl: undefined,
      items: []
    }
    formRef.value?.resetFields()
  }
</script>
